<template>
  <view class="layout layout-column">
    <van-sticky>
      <van-nav-bar
        :placeholder="true"
        title="保养"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-button
            type="primary"
            @click="onSubmit"
            class="layout-btn"
            size="small"
            >提交</van-button
          >
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="van-list">
      <van-form>
        <van-field
          v-model="dataForm.userLabelList"
          name="userLabelList"
          label="保养人员"
          is-link
          required
          readonly
          @click="userShow = true"
        />
        <van-field
          readonly
          clickable
          name="actualStartTime"
          required
          v-model="dataForm.actualStartTime"
          label="实际开始"
          is-link
          @click="onChangeTime('actualStartTime')"
        />
        <van-field
          readonly
          clickable
          name="actualEndTime"
          required
          v-model="dataForm.actualEndTime"
          label="实际结束"
          is-link
          @click="onChangeTime('actualEndTime')"
        />
        <van-field
          v-model="dataForm.maintainHours"
          name="maintainHours"
          label="保养工时"
          required
        >
          <template #right-icon>小时</template>
        </van-field>
        <!-- <van-field name="isSolve" required label="工单已完成">
          <template #input>
            <van-switch
              :active-value="1"
              :inactive-value="0"
              v-model="dataForm.isSolve"
              size="20"
            />
          </template>
        </van-field> -->
        <van-field
          name="supplementaryDescription"
          rows="1"
          autosize
          type="textarea"
          v-model="dataForm.supplementaryDescription"
          label="补充说明"
        />
        <van-card v-for="item in list" :key="item.id">
          <template #title>
            <div class="title">
              保养项：{{ item.itemName
              }}{{ item.itemCode ? "【" + item.itemCode + "】" : "" }}
            </div>
          </template>
          <template #desc>
            <div class="item"><span>保养项描述:</span> {{ item.remark }}</div>
            <div class="item">
              <span>保养结果:</span>
              <van-checkbox
                @change="onCheckbox($event, item)"
                :name="1"
                shape="square"
                v-model="item.isFinish"
                >完成</van-checkbox
              >
            </div>
          </template>
        </van-card>
      </van-form>
    </div>
    <MultiplePicker
      title="保养人员"
      :show="userShow"
      :columns="userList"
      @confirm="onConfirmUser"
      :defaultIndex="defaultIndex"
      @cancel="userShow = false"
    />
    <van-popup v-model:show="showPicker" position="bottom">
      <van-datetime-picker
        @confirm="confirm"
        @cancel="showPicker = false"
        v-model="checkTime"
        type="datetime"
        title="时间"
        :min-date="minDate"
      />
    </van-popup>
  </view>
</template>
    
<script>
import { getItem, maintainreport, getGroupUser } from "@/api/home.js";
import { mapGetters, mapMutations } from "vuex";
import { Notify, Toast, Dialog } from "vant";
import dayjs from "dayjs";
import MultiplePicker from "../maintain/multiple-picker";
export default {
  components: { MultiplePicker },
  data() {
    return {
      loading: false,
      showPicker: false,
      value: "",
      dataForm: {},
      checkTime: new Date(),
      minDate: new Date(2024, 0, 1),
      list: [],
      userShow: false,
      userList: [],
      defaultIndex: [],
      timeType: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo", "dataRow"]),
  },
  onLoad({ id }) {
    this.getItemList(id);
    this.getUserList(this.dataRow.groupId);
  },
  mounted() {
    const { userName, userId } = this.userInfo;
    this.dataForm.userList = [{ userName, userId }];
    this.dataForm.userLabelList = userName;
    this.defaultIndex = [userName];
  },
  methods: {
    async getUserList(groupId) {
      const res = await getGroupUser(groupId);
      if (res.data && res.data.length) {
        this.dataForm.userList = [];
        let value = [];
        this.userList = res.data.map((item) => {
          // this.dataForm.userList.push({
          //   userName: item.userName,
          //   userId: item.userId,
          // });
          // value.push(item.userName);
          return {
            ...item,
            name: item.userName,
            id: item.userId,
          };
        });
        // this.defaultIndex = value;
        // this.dataForm.userLabelList = value.join(",");
      }
    },
    async getItemList(id) {
      const res = await getItem(id);
      if (res.data.length < 1) {
        return uni.showToast({
          icon: "none",
          title: "请维护保养项！",
          duration: 2000,
        });
      }
      this.list = res.data.data.map((item) => {
        item.isFinish = 1;
        return item;
      });
    },
    back() {
      history.back();
    },
    onSubmit() {
      Dialog.confirm({
        title: "提示",
        message: !this.list.every((item) => item.isFinish == 1)
          ? "存在漏保养项,是否继续提交？"
          : "是否确认提交？",
      }).then(async () => {
        const { id } = this.dataRow;
        await maintainreport({
          ...this.dataForm,
          itemList: this.list,
          id,
          isFinish: this.list.every((item) => item.isFinish == 1) ? 1 : 0,
        });
        Toast.success("提交成功！");
        history.back();
      });
    },
    onConfirmUser(data) {
      if (data.value.length) {
        this.defaultIndex = data.value;
        this.dataForm.userLabelList = data.value.join(",");
        this.dataForm.userList = data.selected.map((item) => {
          return {
            userName: item.label,
            userId: item.value,
          };
        });
      } else {
        this.defaultIndex = [];
        this.dataForm.userLabelList = [];
        this.dataForm.userList = [];
      }
      this.userShow = false;
    },
    onChangeTime(type) {
      this.timeType = type;
      this.showPicker = true;
    },
    confirm(date) {
      this.dataForm[this.timeType] = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      this.showPicker = false;
    },
    onCheckbox(value, item) {
      item.isFinish = value ? 1 : 0;
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.home {
  height: calc(100% - var(--van-tabbar-height));
  padding: 10px;
}
</style>
    